<template>
<div class="note-example-box">
	<div class="note-demo-parent-box">
		<el-button @click='fn1'>父组件变量:{{parentData.id}}:{{parentData.name}}</el-button>
		<Demo01Child :parentData='parentData' @parentFn1='parentFn1' ref="demo01ChildRef"></Demo01Child>
	</div>
	<div class="note-code-case">
		<textarea :value='codeVal1' disabled style="height: 600px;"></textarea>
		<textarea :value='codeVal2' disabled style="height: 720px;"></textarea>
	</div>
</div>
</template>
<script setup>
import { reactive, ref } from 'vue'
import Demo01Child from './Demo01Child.vue'

const demo01ChildRef = ref(null);
//父组件变量 parentData
const parentData = reactive({
	id: 11,
	name: 'xx1',
});
//供子级调用
const parentFn1 = (params) => {
	console.log('parentFn1', '接收到子组件变量 childData', params);
};
const fn1 = () => {
	console.log('fn1');
	//在[父组件]调用[子组件]的 childFn1 方法
	demo01ChildRef.value.childFn1(parentData);
};

//对应代码
const codeVal1 = `父组件 Demo01.vue
<template>
<el-button @click='fn1'>父组件变量:{{parentData.id}}:{{parentData.name}}</el-button>
<Demo01Child :parentData='parentData' @parentFn1='parentFn1' ref="demo01ChildRef"></Demo01Child>
</template>

<script setup>
import { reactive, ref } from 'vue'
import Demo01Child from './Demo01Child.vue'

const demo01ChildRef = ref(null);
//父组件变量 parentData
const parentData = reactive({
	id: 11,
	name: 'xx1',
});
//供子级调用
const parentFn1 = (params) => {
	console.log('parentFn1', '接收到子组件变量 childData', params);
};
const fn1 = () => {
	console.log('fn1');
	//在[父组件]调用[子组件]的 childFn1 方法
	demo01ChildRef.value.childFn1(parentData);
};
<script>`;
const codeVal2 = `子组件 Demo01Child.vue
<template>
<el-button @click='fn2'>点击子组件函数</el-button>
<div>childData:{{childData.age}}:{{childData.level}}</div>
<div>parentData:{{parentData.id}}:{{parentData.name}}</div>
</template>

<script setup>
import { reactive } from 'vue'
//接受父组件变量:parentData
defineProps({
	parentData: Object
});
//接收父类函数 parentFn1
const $emit = defineEmits(['parentFn1']);
//子组件变量 childData
const childData = reactive({
	age: 99,
	level: '魂帝',
});
//供父级调用
const childFn1 = (params) => {
	console.log('childFn1', '接收到子组件变量 parentData', params);
};
const fn2 = () => {
	console.log('fn2');
	//在[子组件]调用[父组件]方法
	$emit('parentFn1', childData);
};
//将子组件的 childFn1 方法提供给父组件调用
defineExpose({
	childFn1,
});
<script>
`;
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>